<template>
  <div class="Login">
    <transition name="form-fade" mode="in-out">
    <div class="Index-content" v-show="showLogin">
      <!-- 头部 -->
      <div class="top">
        <h1>elm后台管理系统</h1>
      </div>
      <!-- 登陆内容 -->
      <div class="con">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" status-icon>
          <el-form-item prop="username">
            <el-input placeholder="用户名" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">登录</el-button>
          </el-form-item>
        </el-form>
        <p>温馨提示：</p>
        <p>未登录过的新用户，自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
      </div>
    </div>
  </transition>
  </div>
</template>

<script>
import API from '@/api'
import { mapActions, mapState } from "vuex";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "", // 记录名字
        password: "" // 记录密码
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      showLogin: false //页面是否加载完 判断显示
    }
  },
  mounted() {
    this.showLogin = true;
    if (!this.adminInfo.id) {
      this.getAdminData();
    }
  },
  computed: {
    ...mapState(["adminInfo"])
  },
  methods: {
    ...mapActions(["setLoginKey","getAdminData"]),
    async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          API.getLogin({user_name: this.loginForm.username,
            password: this.loginForm.password}).then(res => {
            if (res.status === 1) {
              this.$message({
                type: "success",
                message: "登录成功"
              });
              this.setLoginKey('yhfkey')
              this.$router.push("Manage");
            } else {
              this.$message({
                type: "error",
                message: res.message,
                offset: 100
              })
            }
          })
        } else {
         this.$notify.error({
          title: '错误',
          message: '账号或密码不能为空，请按格式输入！',
          showClose: false
        });
          return false;
        }
      });
    }
  },
  created() {
    document.body.style.backgroundColor = "#324057"
  },
  // 离开页面销毁
  destroyed() {
    // 改变背景颜色
    document.body.style.backgroundColor = "#fff"
  },
  watch: {
    adminInfo: function (newValue) {
      if (newValue.id) {
        this.setLoginKey("yhfkey");
        this.$message({
          type: "success",
          message: "检测到您之前登录过，将自动登录"
        });
        this.$router.push("Manage");
      }
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/Login/index.scss";
</style>